<template>
	<div>
	<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	<div style="padding: 20px;">
		
		<Card style="max-width:1000px;width: auto;">
			<Spin size="large" fix v-if="loading"></Spin>
			<p slot="title">教师设置</p>
	        <div style="text-align:center">
	            <Row >
		        	<Col span="5" style="margin-bottom:10px;">
			            <Select placeholder="请选择职称" v-model="roleselect" style="width:150px" @on-change="rolechange">
					        <Option v-for="item in rolelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col v-if="gradeselectshow" span="5" style="margin-bottom:10px;">
			            <Select placeholder="请选择年级" v-model="gradeselect" style="width:150px" @on-change="gradeselectchange">
					        <Option v-for="item in gradelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col v-if="classselectshow" span="5" style="margin-bottom:10px;">
			            <Select placeholder="请选择班级" v-model="classselect" style="width:150px" @on-change="getteacher">
					        <Option v-for="item in classlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col v-if="subjectselectshow" span="5" style="margin-bottom:10px;" >
			            <Select placeholder="请选择科目" v-model="subjectselect" style="width:150px" @on-change="getteacher">
					        <Option v-for="item in subjectlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col v-if="subjectleadertypeselectshow" span="5" style="margin-bottom:10px;" >
			            <Select placeholder="请选择等级" v-model="subjectleadertypeselect" style="width:150px" @on-change="subjectleadertypeselectchange">
					        <Option v-for="item in subjectleadertypelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
				    <Col v-if="departmentselectshow" span="4" style="margin-bottom:10px;">
			            <Select placeholder="请选择学部" v-model="departmentselect" style="width:150px" @on-change="getteacher">
					        <Option v-for="item in departmentlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
				    </Col>
	   	 		</Row>
	   	 		<Row style="height: 5px;">
		        	<!--<Col span="24" style="margin-bottom:10px;text-align: right;">
		        		<Button @click="getroleteacher" type="primary" style="margin-top: -72px;">查询当前老师</Button>
		        	</Col>-->
	   	 		</Row>
	   	 		<div style="width:100%;height:1px;border-bottom: 1px solid #e9eaec;margin:10px 0px;"></div>
	   	 		<Row >
		        	<Col span="20" style="text-align: left;margin-bottom:10px;">
		        		<span style="font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前老师：</span>
			            <span v-for="item in teacherselect" style="font-size: 16px;display: inline-block;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{item.label}}</span></span>
				    </Col>
				    <Col span="4" style="text-align: right;">
		        		<Button @click="saveteacher" type="primary" style="margin-top: -5px;">保存当前老师</Button>
		        	</Col>
	   	 		</Row>
	   	 		<Row style="height: 300px;overflow-y: scroll;">
	   	 			<div @click="choose" v-for="item in teacherlist">
	   	 				<Col span="4" style="text-align: center;margin-bottom:10px;">
	   	 					<div tag="button" v-bind:class="[teacherselectshow.indexOf(item.value)>-1?activeclass:'']" :label="item.label" :value="item.value" style="cursor:pointer;margin: 0 auto;width: 100px;height: 38px;border:1px solid #e9eaec;line-height: 38px;border-radius: 5px;">
	   	 						{{item.label}}
	   	 					</div>
					    </Col>
	   	 			</div>
		        	
	   	 		</Row>
	        </div>
	    </Card>
	</div>
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	export default{
		data(){
			return{
				loading: false,				//面板上的加载中显示隐藏
				
				
				role:"",						//服务区返回的role    年段长：gradeleader  科目长：subjectleader  老师：teacher  班主任：classmaster
				
				teacherselect:[],				//老师选择 里面存{value: 'New York',label: 'New York'}这样的
                teacherselectshow:[],			//面板中的选中的颜色不一样的数据 "fe3e3cb22fa24852981f0dd1cacf0a54","df7cecdfae844a80ac8d94b11e246400"存这样的
				
				roleselect:"",					//角色的选择 这个是id串
				gradeselect:"",					//年级选择
				classselect:"",					//班级选择，单独接口
				subjectselect:"",				//科目选择
				subjectleadertypeselect:"",		//校级，年段级，学部级选择
				departmentselect:"",			//高中，初中部选择
				
				gradeselectshow:false,					//控制显示_年级选择
				classselectshow:false,					//班级显示
				subjectselectshow:false,				//控制显示_科目选择
				subjectleadertypeselectshow:false,		//控制显示_校级，年段级，学部级选择
				departmentselectshow:false,			//控制显示_高中，初中部选择
				
				
				rolelist:[],				//角色列表
				teacherlist:[],				//老师列表
				gradelist:[],				//年级列表	
				classlist:[],				//班级列表。单独接口
				subjectlist:[],				//科目列表
				subjectleadertypelist:[],	//校级，年段级，学部级
				departmentlist:[],			//高中，初中部
				
				
				
				model1: '',
				
//				cityList: [
//                  {value: 'New York',label: 'New York'},
//                  {value: 'London',label: 'London'},
//                  {value: 'Sydney',label: 'Sydney'},
//                  {value: 'Ottawa',label: 'Ottawa'},
//                  {value: 'Paris',label: 'Paris'},
//                  {value: 'Canberra',label: 'Canberra'}
//              ],
               
			}
		},
		created(){
			this.getrole();
		},
		computed:{
			activeclass: function() {
				return 'active'
			},
		},
		methods:{
				//根据下拉款的选择去主动获取老师列表
				getteacher:function(){
//					//console.log(this.role)
					
					this.teacherselect = [];				
                	this.teacherselectshow = [];	
					if(this.role == "gradeleader"){		
						if(this.gradeselect){
							this.getroleteacher();
						}
					}
					if(this.role == "subjectleader"){
						//console.log(this.subjectleadertypeselect)
						//校级
						if(this.subjectleadertypeselect == 0){
							if(this.subjectselect){
								this.getroleteacher();
							}
						}
						//学部级
						if(this.subjectleadertypeselect == 1){
							if(this.subjectselect && this.departmentselect){
								this.getroleteacher();
							}
						}
						//年段级
						if(this.subjectleadertypeselect == 2){
							if(this.subjectselect && this.gradeselect){
								this.getroleteacher();
							}
						}
					}
					if(this.role == "teacher"){
//						//console.log(this.gradeselect)
//						//console.log(this.classselect)
//						//console.log(this.subjectselect)
						if(this.gradeselect && this.classselect && this.subjectselect){
							this.getroleteacher();
						}
					}
					if(this.role == "classmaster"){
						if(this.gradeselect && this.classselect){
							this.getroleteacher();
						}
					}
				},
				choose:function(e){
					let dom = e.target;
					var domlabel = dom.getAttribute("label");
					var domvalue = dom.getAttribute("value");
					//如果点到空白地方
					if(dom.getAttribute("label") == null){
						return;
					}
					if(dom.getAttribute("class") == "active"){
						for(let i = 0;i<this.teacherselect.length;i++){
							if(this.teacherselect[i].value == domvalue){
								this.teacherselect.splice(i,1)
//								//console.log(i)
							}
						}
						for(let i = 0;i<this.teacherselectshow.length;i++){
							if(this.teacherselectshow[i] == domvalue){
								this.teacherselectshow.splice(i,1)
//								//console.log(i)
							}
						}
//						//console.log(this.teacherselectshow)
//						//console.log(this.teacherselect)
					}else{
						this.teacherselect.push({value: domvalue,label: domlabel})
						this.teacherselectshow.push(domvalue)
					}
					
					
				},
				//角色改变触发函数
				rolechange:function(){
					this.getroleselect();
				},
				//年级改变的触发函数
				gradeselectchange:function(){
					if(this.role == "teacher" || this.role == "classmaster"){
						this.getclasslist();
						this.classselectshow = true;
						this.classselect = "";
					}else{
						this.classselectshow = false;
					}
					this.getteacher()
				},
				//等级改变触发函数： 	年段，学部，校级   	专为科目长设置
				subjectleadertypeselectchange:function(value){
					if(this.role == "subjectleader"){
						//校级
						if(value == 0){
							this.gradeselectshow = false;					//控制显示_年级选择
							this.classselectshow = false;					//班级显示
							this.subjectselectshow = true;				//控制显示_科目选择
							this.subjectselect = "";
							this.departmentselectshow = false;			//控制显示_高中，初中部选择
						}
						//学部级
						if(value == 1){
							this.gradeselectshow = false;					//控制显示_年级选择
							this.classselectshow = false;					//班级显示
							this.subjectselectshow = true;				//控制显示_科目选择
							this.departmentselectshow = true;			//控制显示_高中，初中部选择
							this.subjectselect = "";
							this.departmentselect = "";
						}
						//年段级
						if(value == 2){
							this.gradeselectshow = true;					//控制显示_年级选择
							this.gradeselect = "";
							this.classselectshow = false;					//班级显示
							this.subjectselectshow = true;				//控制显示_科目选择
							this.subjectselect = "";
							this.departmentselectshow = false;			//控制显示_高中，初中部选择
						}
					}
					this.getteacher()
				},
				//获取角色下拉值和所有老师列表				
				getrole:function(){
					this.loading = true;
					
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchTeacher/getInitAllotClassesSelect';
	            	this.$http.post(url, {}).then(function(response) {
						if(response.data.success == true){
//							////console.log(response.data.data)
							
							self.rolelist = response.data.data.roleList;
							self.teacherlist = response.data.data.teacherList;
							
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00051',
							duration: 10,
							closable: true
						});
					});
				},
				//获取改变科目的去获取相对应的老师				
				getsubjectteacher:function(){
					this.loading = true;
					
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchTeacher/getFilterTeacherList';
	            	this.$http.post(url, {"subject": this.subjectselect, }).then(function(response) {
						if(response.data.success == true){
//							////console.log(response.data.data)
							
//							self.rolelist = response.data.data.roleList;
							self.teacherlist = response.data.data;
							
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00052',
							duration: 10,
							closable: true
						});
					});
				},
				//根据选择的角色去拉取后面的下拉框
				getroleselect:function(){
					this.loading = true;
					
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchTeacher/getAllotClassesSelectByRole';
	            	this.$http.post(url, {"id":this.roleselect}).then(function(response) {
						if(response.data.success == true){
//							//console.log(response.data.data.role)
							self.role = response.data.data.role
							//服务区返回年段长的角色
							if(response.data.data.role == "gradeleader"){
								self.gradeselectshow = true					//控制显示_年级选择	
								self.gradeselect = "";
								
								self.classselectshow = false;
								self.subjectselectshow = false;				//控制显示_科目选择
								self.subjectleadertypeselectshow = false;		//控制显示_校级，年段级，学部级选择
								self.departmentselectshow = false;			//控制显示_高中，初中部选择
								
							}
							//服务区返回科目长的角色
							if(response.data.data.role == "subjectleader"){
								self.subjectleadertypeselectshow = true		//控制显示_校级，年段级，学部级选择
								self.subjectleadertypeselect = "";
								
								self.classselectshow = false;
								self.gradeselectshow = false;					//控制显示_年级选择		
								self.subjectselectshow = false;				//控制显示_科目选择
								self.departmentselectshow = false;			//控制显示_高中，初中部选择
								
							}
							//服务区返回老师的角色;     还需要班级选择
							if(response.data.data.role == "teacher"){
								self.gradeselectshow= true					//控制显示_年级选择		
								self.subjectselectshow= true				//控制显示_科目选择
								self.gradeselect = "";
								self.subjectselect = "";
								
								self.classselectshow = false;
								self.subjectleadertypeselectshow = false;		//控制显示_校级，年段级，学部级选择
								self.departmentselectshow = false;			//控制显示_高中，初中部选择
							}
							//服务区返回班主任的角色;    还需要班级选择
							if(response.data.data.role == "classmaster"){
								self.gradeselectshow= true					//控制显示_年级选择		
								self.gradeselect = "";
								
								self.classselectshow = false;
								self.subjectselectshow = false;				//控制显示_科目选择
								self.subjectleadertypeselectshow = false;		//控制显示_校级，年段级，学部级选择
								self.departmentselectshow = false;			//控制显示_高中，初中部选择
							}
							
							
							self.gradelist = response.data.data.gradeList				//年级列表		
							self.subjectlist = response.data.data.subjectList				//科目列表
							self.subjectleadertypelist = response.data.data.subjectLeaderTypeList	//校级，年段级，学部级
							self.departmentlist = response.data.data.departmentList			//高中，初中部
							
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00053',
							duration: 10,
							closable: true
						});
					});
				},
				//获取班级级选择列表
	           	getclasslist:function(){
	           		this.loading = true;
	           		var self = this;
	            	let url = api.apidomain+'/tqes/web/tchStudent/getTchClassesSelect';
	            	this.$http.post(url, {gradeId:this.gradeselect}).then(function(response) {
						if(response.data.success == true){
							
	//						////console.log(response.data.data)
							self.classlist = response.data.data
							
							self.loading = false;
			            }else if(response.data.success == false){
			            		self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
			            		self.loading = false;
			            	}
						})
						.catch(function(error) {
							self.$Message.error({
								content: '系统发生错误：错误码00054',
								duration: 10,
								closable: true
							});
							self.loading = false;
						});
	           	},
	           	//根据当前select框的选择获取老师
				getroleteacher:function(){
					this.loading = true;
					var senddata = {
						"role":this.roleselect, 								//角色id
						 "grade":this.gradeselect, 								//年级id
						 "classes":this.classselect,							//班级id
						 "subject":this.subjectselect,							//科目id
						 "subjectLeaderType":this.subjectleadertypeselect,		//科目长类型
						 "department":this.departmentselect						//学部id
						 
					}
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchTeacher/getCurTeacher';
	            	this.$http.post(url, senddata).then(function(response) {
						if(response.data.success == true){
//							////console.log(response.data.data)
							
							self.teacherselect = response.data.data;		
               				self.teacherselectshow = [];
               				var showdata = response.data.data;
               				for(let i = 0;i<showdata.length;i++){
               					self.teacherselectshow.push(showdata[i].value)
               				}
							
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00055',
							duration: 10,
							closable: true
						});
					});
				},
				saveteacher:function(){
					this.loading = true;
					var senddata = {
						"role":this.roleselect, 								//角色id
						 "grade":this.gradeselect, 								//年级id
						 "classes":this.classselect,							//班级id
						 "subject":this.subjectselect,							//科目id
						 "subjectLeaderType":this.subjectleadertypeselect,		//科目长类型
						 "department":this.departmentselect,		//学部id
						 "teacherList":this.teacherselectshow
						 
					}
					var self = this;
	            	let url = api.apidomain+'/tqes/web/tchTeacher/saveAllotTeacher';
	            	this.$http.post(url, senddata).then(function(response) {
						if(response.data.success == true){
//							////console.log(response.data.data)
							
							
							self.$Message.success({
			                    content: response.data.msg,
			                    duration: 10,
			                    closable: true
	               			})
							self.loading = false;
		            }else if(response.data.success == false){
		            		self.loading = false;
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            	}
		            	
					})
					.catch(function(error) {
						self.loading = false;
						self.$Message.error({
							content: '系统发生错误：错误码00056',
							duration: 10,
							closable: true
						});
					});
				}
		},
		watch:{
			subjectselect:function(){
				
				this.getsubjectteacher()
			}
		}
	}
</script>

<style>
	.active{
		background-color: #517edb;
		color: white;
	}
</style>